/*
 * @Author: your name
 * @Date: 2021-09-10 00:04:48
 * @LastEditTime: 2021-09-10 00:05:20
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \more-money\vue.config.js
 */
/* eslint-disable */
const path = require('path');

module.exports = {
  lintOnSave: false,
  //使用svg-sprite后可导入svg文件而不是路径字符串（原理：在浏览器中被解析成symbol(标签)，在统一放在svg标签下在浏览器中渲染），则可在svg标签下使用use标签从而渲染出对应的svg
  chainWebpack:config=>{ 
    const dir = path.resolve(__dirname,'src/assets/icons');
    //config为vue-cli封装webpack的API后所暴露出的可使用对象
    config.module
      .rule('svg-sprite')  //使用规则
      .test(/\.svg$/)  //规则使用时机（与正则匹配），但也可添加适用场景不然所有目录下都进行匹配浪费性能（如下约束）
      .include.add(dir).end()  //即是包含在dir目录下才适用，end()表示目录就仅有前面的
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()  //配置选项中的extract:false表示无需解析出文件，仅是执行loader对程序的出力（？）
      //表示当前所属规则使用哪种loader加载，use与loader相当于key-value，前者是以字符串命名该loader，后者则是指向package中实体Loader
      //以上为loader的配置，但仍需插件的配置（loader,plugins相形相随） 
    config.plugin('svg-sprite-loader').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}]) 
    //插件的use()参数则是插件实体（require导入模块对象）和配置项数组
    config.module.rule('svg').exclude.add(dir) //其他的svg需要排除使用icons目录下的规则（即是loader与plugin）
  }
}
